<template>
  <div class="container">
    <div class="header">
      <el-form ref="form" :model="form" label-position="left" label-width="75px">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="20">
            <el-row type="flex" justify="start" :gutter="20">
              <el-col :span="6">
                <el-form-item label="申请人:" prop="applyName">
                  <el-input v-model="form.applyName" placeholder="请输入"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商铺名称:" prop="shopName">
                  <el-input v-model="form.shopName" placeholder="请输入"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请时间:" prop="applyDate">
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.applyDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <div class="btn-group">
              <el-button class="query" @click="getQiyeList">查询</el-button>
              <el-button plain class="clear" @click="resetForm">清空</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="jingqu-list">景区列表</div>
        <el-tree
          ref="tree"
          :data="jingquList"
          show-checkbox
          node-key="jingquName"
          default-expand-all
          :props="{ label: 'jingquName' }"
          highlight-current
          check-on-click-node
          accordion
          check-strictly
          @check="jingquCheck"
        >
        </el-tree>
      </div>
      <div class="content-right">
        <div class="table-header">
          <span class="left">列表</span>
          <div class="right">
            <el-button type="primary" icon="el-icon-download" class="export" @click="exportHandle">导出</el-button>
            <el-button icon="el-icon-refresh-right" class="refresh" @click="getQiyeList">刷新</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            :data="shopList"
            :header-cell-style="headerCellStyle"
            style="width: 100%"
            max-height="calc(100% - 50px)">
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center">
            </el-table-column>
            <el-table-column
              prop="applyName"
              label="申请人"
              min-width="130">
              <template slot-scope="scope">
                {{scope.row.applyName}}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="商铺名称"
              min-width="140">
              <template slot-scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>
            <el-table-column
              prop="jingquName"
              label="所属景区"
              min-width="180">
              <template slot-scope="scope">
                {{scope.row.jingquName}}
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="商铺状态"
              min-width="130">
              <template slot-scope="scope">
                <span v-if="scope.row.status === '0'" class="status-normal">正常营业</span>
                <span v-if="scope.row.status === '1'" class="status-stop">暂停营业</span>
                <span v-if="scope.row.status === '2'" class="status-clear">店铺撤场</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="申请时间"
              min-width="180">
              <template slot-scope="scope">
                {{scope.row.updateTime}}
              </template>
            </el-table-column>
            <el-table-column
              prop="auditBy"
              label="审批人"
              min-width="130">
              <template slot-scope="scope">
                {{scope.row.auditBy || '-'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="auditStatus"
              label="审批结果"
              min-width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.auditStatus === '1'">
                  已通过
                </el-tag>
                <el-tag v-if="scope.row.auditStatus === '0'" type="success">
                  待审批
                </el-tag>
                <el-tag v-if="scope.row.auditStatus === '2'" type="danger">
                  已驳回
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              min-width="150">
              <template slot-scope="scope">
                <el-link type="primary" class="look" @click="toDetail(scope.row.id)">查看</el-link>
                <el-link :type="scope.row.auditStatus === '0' ? 'primary' : 'info'" :disabled="scope.row.auditStatus !== '0'" class="process" @click="toAudit(scope.row.id)">审批</el-link>
                <el-link type="primary" class="delete" @click="toEdit(scope.row.id)">编辑</el-link>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <span>总共 {{pageTotal}} 条</span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click="handlePrevClick"
              @next-click="handleNextClick"
              :current-page.sync="currentPage"
              :page-sizes="[3,10, 20, 30, 40]"
              :page-size="pageSize"
              layout="prev, pager, next, sizes"
              :total="pageTotal">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getQiyeList} from "@/api/form/enterprise";
import moment from "moment";
import {jingQuListApi} from "@/api/YApi/scenicSpot";
import {exportHandle} from "@/api/form/enterprise";
import {downloadFile} from "@/utils";

export default {
  async mounted () {
    await this.getJingquList()
    await this.getQiyeList()
  },
  data () {
    return {
      form: {
        applyName: '',
        shopName: '',
        applyDate: ''
      },
      jingquId: '',
      jingquList: [],
      shopList: [],
      currentPage: 1,
      pageSize: 10,
      pageTotal: 0
    }
  },
  computed: {
    headerCellStyle () {
      return {'font-size': '16px','font-weight': 400,color: '#999999',background: '#fff'}
    }
  },
  methods: {
    async getJingquList () {
      const { code, data } = await jingQuListApi()
      if (code === 200) {
        this.jingquList = [
          {
            jingquName: '舒城县旅游',
            children: [
              ...data
            ]
          }
        ]
      }
    },
    async exportHandle() {
      let [beginCreateTime, endCreateTime] = this.form.applyDate
      if (beginCreateTime) {
        beginCreateTime = moment(beginCreateTime).format('YYYY-MM-DD')
      }
      if (endCreateTime) {
        endCreateTime = moment(endCreateTime).format('YYYY-MM-DD')
      }
      const { code, data, msg } = await exportHandle({
        applyName: this.form.applyName,
        beginCreateTime: beginCreateTime || '',
        endCreateTime: endCreateTime || '',
        name: this.form.shopName,
        jingquId: this.jingquId,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      })
      if (code !== 200) {
        this.$message({ message: msg, type: 'error' })
        return
      }
      downloadFile(data, '企业列表')
      this.$message({ message: '已导出', type: 'success' })
    },
    async getQiyeList () {
      let [beginCreateTime, endCreateTime] = this.form.applyDate
      if (beginCreateTime) {
        beginCreateTime = moment(beginCreateTime).format('YYYY-MM-DD')
      }
      if (endCreateTime) {
        endCreateTime = moment(endCreateTime).format('YYYY-MM-DD')
      }
      console.warn(beginCreateTime, endCreateTime)
      const { code, data, msg } = await getQiyeList({
        applyName: this.form.applyName,
        beginCreateTime: beginCreateTime || '',
        endCreateTime: endCreateTime || '',
        name: this.form.shopName,
        jingquId: this.jingquId,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      })
      if (code === 200) {
        this.shopList = data.rows
        this.pageTotal = data.total
      } else {
        this.$message({ message: msg, type: 'error' })
      }
    },
    resetForm () {
      this.$refs['form'].resetFields();
      this.$refs.tree.setCheckedKeys([])
      this.$refs.tree.setCheckedNodes([])
    },
    jingquCheck(item, event) {
      const { jingquName, jingquId } = item
      console.log(item, event);
      if (event.checkedKeys.includes(jingquName)) {
        this.$refs.tree.setCheckedKeys([jingquName])
        this.$refs.tree.setCheckedNodes([item])
        // 查询
        this.jingquId = jingquId
        this.getQiyeList()
      } else {
        this.jingquId = ''
      }
    },
    toDetail (shopId) {
      this.$router.push(`/form/enterprise/detail?id=${shopId}&type=detail`)
    },
    toAudit (shopId) {
      this.$router.push(`/form/enterprise/audit?id=${shopId}&type=audit`)
    },
    toEdit(shopId) {
      this.$router.push(`/form/enterprise/edit?id=${shopId}&type=edit`)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getQiyeList()
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getQiyeList()
    },
    handlePrevClick (currentPage) {
      this.currentPage = currentPage
      this.getQiyeList()
    },
    handleNextClick (currentPage) {
      this.currentPage = currentPage
      this.getQiyeList()
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-tree-node__label {
  color: #333333;
}
.container {
  height: 100%;
  width: 100%;
  background-color: var(--theme_bg_color);
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 15px 15px 15px 25px;
    margin-bottom: 16px;

    ::v-deep .el-form-item {
      margin-bottom: 0 !important;
    }

    .btn-group {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .query {
        width: 72px;
        height: 32px;
        background: #3370FF;
        border: none;
        color: #ffffff;
      }
      .clear {
        width: 72px;
        height: 32px;
      }
    }

  }
  .content {
    display: flex;
    flex: 1;
    .content-left, .content-right {
      background: #fff;
      border-radius: 8px;
    }
    .content-left {
      margin-right: 16px;
      width: 220px;
      height: 100%;
      padding: 16px;
      .jingqu-list {
        font-size: 14px;
        font-weight: 400;
        color: #111111;
        line-height: 19px;
        margin-bottom: 16px;
      }
    }
    .content-right {
      width: calc(100% - 220px - 16px);
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: var(--theme_bg_color);
      position: relative;
      .table-header {
        height: 60px;
        width: 100%;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #E4E7ED;
        background-color: #fff;
        position: absolute;
        .left {
          font-size: 16px;
          font-weight: 400;
          color: #111111;
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .add {
            background: #3370FF;
            border: none;
          }
          .export {
            background: #79CF1C;
            border: none;
          }
        }
      }
      .table-box {
        width: 100%;
        max-height: calc(100% - 60px);
        position: absolute;
        top: 60px;
        overflow: auto;
      }
    }
    .status-normal {
      color: #2E69F8;
    }
    .status-stop {
      color: #FF8521;
    }
    .status-clear {
      color: #999999;
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 50px;
      background-color: #fff;
      span {
        font-size: 5rpx;
      }
    }
    .process {
      margin: 0 20px;
    }
  }
}
</style>
